<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <label for="1">输入密码 </label>
    <input id="1" type="text" name="first" />
    <label for="2">确认密码</label>
    <input id="2" type="text" name="second" />
    <br />
    <span name="msg"></span>
  </body>
  <script>
    function queryElement(value) {
      return document.querySelector(`[name='${value}']`);
    }
    let pwd = document.querySelectorAll("[name = first],[name = second]");
    [...pwd].map((item) => {
      let msg = "";
      item.addEventListener("keyup", function () {
        if (
          queryElement("first").value != queryElement("second").value &&
          queryElement("second").value != ""
        ) {
          msg = "两次密码输入不一致，请重新输入";
        }
        queryElement("msg").innerHTML = msg;
        msg = "";
      });
    });
  </script>
</html>
